<template>
	<div class="container">
		<div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i><span class="cube-title">产品详情</span>
    </div>
    <div class="jx-detail">
      <div class="detail-item">
        <div class="item_2 item">
          <div class="title">
            基本信息
          </div>
          <div class="list">
            <span>产品类型：</span>
            <div class="right">
              <span>{{detail.serviceProductCatalog || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>产品分类：</span>
            <div class="right">
              <span>{{detail.catalogName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>产品名称：</span>
            <div class="right">
              <span>{{detail.serviceProductName || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>适用车系：</span>
            <div class="right">
              <span>{{detail.suitCarSeries || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>适用地区：</span>
            <div class="right">
              <span>{{detail.serviceProductLocationProvinceCity || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>采购价格：</span>
            <div class="right">
              <span>{{detail.serviceProductPrice || '--'}}元/次</span>
            </div>
          </div>
          <div class="title" style="margin-top: 35px;">上门服务</div>
          <div class="list">
            <span>是否收费：</span>
            <div class="right">
              <span>{{(detail.isDoorDoorService ? '是' : '否') || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>收费标准：</span>
            <div class="right">
              <span>{{detail.serviceProductCharges || '--'}}</span>
            </div>
          </div>
          <div class="list">
            <span>上门服务须知：</span>
            <div class="right">
              <el-button type="text" size="small" @click="viewService">点击查看</el-button>
            </div>
          </div>
        </div>
        <div class="item_2 item">
          <div class="title">产品清单</div>
          <div class="list">
            <div class="right">
              {{detail.serviceProductList || '--'}}
            </div>
          </div>
          <div class="title" style="margin-top: 35px;">服务说明</div>
          <div class="list">
            <div class="right">{{detail.serviceProductDesc || '--'}}</div>
          </div>
        </div>
      </div>
      <div class="detail-item">
        <div class="item">
          <div class="title">支持店铺（{{detail.shopCount || '--'}}家）</div>
          <div class="select-type">
            <div class="item table-item">
              <div class="right">
                <div class="item-inline">
                  <span>店铺名称</span>
                  <el-input class="tel-value" v-model="params_list.name" placeholder="请输入店铺名称"></el-input>
                </div>
                <div class="item-inline">
                  <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="jx-table" style="padding: 0;">
            <el-table :data="carlist" border style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="shopName" label="店铺名称" width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopLocationProvinceCity" label="所在地区" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="shopAddress" label="定位地址" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <img class="icon" src="/static/img/u178.png"/>
                  <span>{{scope.row.shopAddress}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="shopPhone" label="电话"  width="150" align="center" :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 上门服务须知 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">上门服务须知</span>
      </div>
      <div v-html="detail.shopProductDoorDoorService"></div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          detail: this.$api.product.list.detail,
          carlist: this.$api.product.list.carlist,
        },
        boo: {
          loading: false,
          showDialog: false,
        },
        detail: '',
        params_list: {
          name: '',
        }
			}
		},
		mounted(){
      let _self = this
      _self.getDetail()
      _self.getList()
    },
		methods: {
      back(){
        history.go(-1)
      },
      getDetail(){
        let _self = this
        let params = {
          id: this.$route.query.id,
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.detail = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(`${_self.https.detail}${params.id}`, {}, success) 
      },
      viewService(){
        let _self = this
        _self.boo.showDialog = true
      },
      search(){
        let _self = this
        _self.getList()
      },
      getList(){
        let _self = this
        let params = {
          shopName: _self.params_list.name,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.carlist = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(`${_self.https.carlist}${_self.$route.query.id}`, params, success) 
      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 62px
  .jx-table
    .el-table .cell
      .icon 
        width: 17px
        height: 18px
        position: relative
        top: 2px
</style>
